<template>
  <div class="view-content-box pt-24">
    <div class="title-list">
      <div v-for="(val, key) in typeList" :key="key">
        {{ val }}
      </div>
    </div>
    <div class="msg-box">
      <div class="title">更换总瓶数</div>
      <div class="msg-list">
        <div v-for="(val, key) in typeMsg" :key="key" class="msg">
          {{ val }}
        </div>
      </div>
    </div>
    <LoadList
      class="view-content"
      :query-params="{ id: route.query.id }"
      :loading-data="postMpDeviceMaterialPage"
      :empty-description="'暂无数据'"
    >
      <template #list="{ list }">
        <div v-for="item in list" class="list-item">
          <div>
            <span>设备编号：</span>
            <span>{{ item.deviceNo }}</span>
          </div>
          <div>
            <span>更换原料：</span>
            <span>{{ typeList[item.materialType] }}</span>
          </div>
          <div>
            <span>更换时间：</span>
            <span>{{ item.createTime }}</span>
          </div>
          <div>
            <span>操作人：</span>
            <span>{{ item.nickname }}</span>
          </div>
        </div>
      </template>
    </LoadList>
  </div>
</template>

<script setup>
import {
  postMpDeviceMaterialPage,
  postMpDeviceMaterialStatis,
} from "@/api/index";
import { onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const typeList = {
  0: "洗发水",
  1: "护发素",
  2: "养发液",
};
const typeMsgTitle = reactive();
const typeMsg = reactive({
  conditionerNum: "",
  hairtonicNum: "",
  hampooNum: "",
});
const list = ref([]);
onMounted(() => {
  postMpDeviceMaterialStatis({
    id: route.query.id,
  }).then((res) => {
    for (let key in typeMsg) {
      typeMsg[key] = res.data[key];
    }
  });
});
</script>

<style lang="less" scoped>
.title-list {
  display: grid;
  margin-left: 200px;
  font-size: 34px;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 16px 32px;
  text-align: center;
}
.msg-box {
  display: flex;
  font-size: 34px;
  padding: 16px 32px;
  border-bottom: 1px solid #eee;

  .title {
    width: 200px;
  }
  .msg-list {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .msg {
    text-align: center;
  }
}
.list-item {
  padding: 0 15px 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  border-bottom: 1px solid #eee;
  > div {
    color: #333;
    font-size: 30px;
  }
}
</style>
